<!--
 * @Author: 日光独倾 1563196747@qq.com
 * @Date: 2023-04-12 22:42:31
 * @LastEditors: 日光独倾 1563196747@qq.com
 * @LastEditTime: 2023-04-13 11:27:12
 * @FilePath: \影音盒子\vue-app\src\components\MyFooter.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="footer" :style="{ background: curNav.bgColor }">
    <div v-for="nav in navs" :key="nav.path" @click="changeNav(nav)">
      <router-link :to="nav.path">{{ nav.title }}</router-link>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "MyFooter",

  data() {
    return {
      navs: [
        { bgColor: '#ff0000', path: '/', title: '剧集' },
        { bgColor: '#cc9965', path: '/music', title: '音乐' },
        { bgColor: '#327810', path: '/book', title: '书籍' },
        // { bgColor: '#132546', path: '/chat', title: '聊天' },
      ],
    };
  },
  computed: {
    ...mapState(['curNav'])
  },
  // created() {
  //   const curPath = this.navs.find((value) => {
  //     if (value.path == this.$route.path) {
  //       return value
  //     }
  //   })
  //   this.changeNav(curPath)
  // },
  methods: {
    ...mapMutations(['changeNav'])
  },
};
</script>

<style lang="scss" scoped>
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #ff0000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #fff;
    }
  }
}
</style>